<template>
 <div class="tabbar">
    <div v-for="(i,index) in data" :key="index" @click='jumpPage(i)'>
    <i v-html="i.icon"></i>
    <span>{{i.title}}</span>
    </div>
</div>
</template>
<script>
export default {
  name: 'tabbar',
  data () {
    return {
      data: [
        { icon: ' &#xe600;', title: '进行中的实验', path: '/pending' },
        { icon: '&#xe637;', title: '我的项目', path: '/project/list' },
        { icon: '&#xe63b;', title: '审批中心', path: '/approval' },
        { icon: '&#xe619;', title: '我的', path: '/main' }
      ]
    }
  },
  methods: {
    jumpPage (data) {
      this.$router.push(data.path)
    }
  }
}
</script>
<style lang="less" scoped>
@import '../../style/common.less';
.tabbar{
  width:100%;
  height:60px;
  background-color: transparent;
  display:flex;
  text-align:center;
  justify-content:space-around ;

border-top:1px solid @c7;
  .EDM-font();
  >div{
    display:flex;
    flex-direction: column;
    justify-content: center;
    span{
      font-size:.7rem;
    }
  }
}
</style>
